<template>
    <div class="usedquestion">
        <div class="questionBox">
            <h1 class="totalTitle">{{totalTitle}}</h1>
            <div class="totalRemark">{{totalRemark}}</div>
            <div class="question" v-for="(item, i) in questionList" :key="i">
                <div class="inputBox" v-if="questionList[i].type != 'text'">
                    <div class="questionTitle">{{questionIndex(i, this.$route.query.index)}}.{{questionList[i].title}}
                    </div>
                    <div class="questionRemark" v-if="questionList[i].remark">{{questionList[i].remark}}</div>
                    <div class="questionOptions"
                        v-if="questionList[i].type == 'radio' || questionList[i].type == 'checkbox'">
                        <div v-for="(citem, cindex) in questionList[i].options" :key="cindex">
                            <input :type="questionList[i].type" :name="questionList[i].qid"
                                :id="cindex + questionList[i].qid" :value="citem.message"
                                v-model="this.$store.state.answers[i].answer">
                            <label :for="cindex + questionList[i].qid">{{citem.message}}</label>
                        </div>
                    </div>
                    <div class="questionInput" v-else>
                        <input type="text">
                    </div>
                </div>
                <div class="textBox" v-else>
                    {{questionList[i].text}}
                </div>
            </div>
            <div class="submit">
                <div class="btn" @click="submit">提交</div>
            </div>
        </div>
    </div>
</template>

<script>
    import store from '../../store'
    import {
        statistical
    } from '@/util/apis'
    export default {
        // vuex 点击统计生成对应的answers数组以及对象  添加路由 父组件传递index的值过来 修改创建问卷逻辑（只有单选和多选才能勾选必填）
        data() {
            return {
                // totalTitle: store.state.question[sessionStorage.getItem('index')].totalTitle,
                // totalRemark: store.state.question[sessionStorage.getItem('index')].totalRemark,
                // questionList: store.state.question[sessionStorage.getItem('index')].questions,
                // defTotalTitle: '',
                // defTotalRemark: '',
                // defQuestionList: [],
            }
        },
        methods: {
            submit() {
                console.log(this.questionList)
                let hasEmpty = false
                for (let i = 0; i < store.state.question[sessionStorage.getItem('index')].questions.length; i++) {
                    if (store.state.answers[i].answer.length == 0) {
                        alert('还有必选题没完成')
                        hasEmpty = true
                    }
                }
                if (!hasEmpty) {
                    // console.log(store.state.answers)
                    alert('完成答卷了捏~')
                    let params = {
                        id: store.state.question[sessionStorage.getItem('index')].id,
                        answers: store.state.answers
                    }
                    statistical(params).then((response) => {
                        console.log(response)
                        store.commit('changeAnswers', sessionStorage.getItem('index'))
                    }).catch((error) => {
                        console.log(error)
                    })

                }
            }
        },
        // created() {
        //     if(store.state.question.length > 0){
        //         console.log(store.state.question)
        //         this.defTotalTitle = store.state.question[sessionStorage.getItem('index')].totalTitle
        //         this.defTotalRemark = store.state.question[sessionStorage.getItem('index')].totalRemark
        //         this.defQuestionList = store.state.question[sessionStorage.getItem('index')].questions
        //     }
        // },
        computed: {
            questionIndex() {
                return function (index, ri) {
                    let qIndex = index + 1
                    for (let i = 0; i < index; i++) {
                        if (store.state.question[ri].questions[i].type == 'text') {
                            qIndex = qIndex - 1
                        }
                    }
                    return qIndex
                }
            },
            totalTitle() {
                if(store.state.question.length > 0){
                    return store.state.question[sessionStorage.getItem('index')].totalTitle
                }
                return this.defTotalTitle
            },
            totalRemark() {
                if(store.state.question.length > 0){
                    return store.state.question[sessionStorage.getItem('index')].defTotalRemark
                }
                return this.defTotalRemark
            },
            questionList() {
                if(store.state.question.length > 0){
                    return store.state.question[sessionStorage.getItem('index')].questions
                }
                return this.defQuestionList
            }
        },
    }
</script>

<style scoped>
    .usedquestion {
        width: 100vw;
        height: 100vh;
        background-color: #2b343b;
        overflow: auto;
    }

    .questionBox {
        position: relative;
        width: 1000px;
        min-height: 500px;
        background-color: #fff;
        margin: 0 auto;
        margin-top: 80px;
        padding: 30px;
        border-radius: 2rem;
        box-shadow: 0 60px 40px -30px rgba(0, 0, 0, .27);
    }

    .totalTitle {
        position: relative;
        width: 100%;
        text-align: center;

    }

    .totalRemark {
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 1.3rem;
    }

    .question {
        position: relative;
        width: 90%;
        min-height: 30px;
        margin: 0 auto;
        margin-top: 20px;
    }

    .inputBox {
        position: relative;
        width: 100%;
        min-height: 100px;
    }

    .questionTitle {
        position: relative;
        width: 100%;
        font-size: 1.2rem;
    }

    .questionRemark {
        position: relative;
        width: 100%;
        font-size: 1rem;
        margin-left: 20px;
    }

    .questionOptions {
        position: relative;
        width: 100%;
        min-height: 20px;
        margin-left: 20px;
    }

    .textBox {
        position: relative;
        font-size: 1.2rem;
    }

    .questionInput {
        position: relative;
        width: 100%;
        padding-left: 20px;
    }

    .questionInput>input {
        display: block;
        position: relative;
        width: 100%;
        height: 36px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .submit {
        position: relative;
        width: 100%;
        height: 50px;
        margin-top: 20px;
    }

    .btn {
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: slateblue;
        top: 0;
        right: 100px;
        color: #fff;
        font-size: 1.3rem;
        text-align: center;
        line-height: 50px;
        border-radius: .5rem;
        cursor: pointer;
    }
</style>